<template>
  <div id="main">
    <van-nav-bar
      title="Blog"
      fixed
      :placeholder="true"
      :safe-area-inset-top="true"
      @click-left="asideShow = true"
      @click-right="
        $router.push({ path: '/editArticle', query: { type: 'add' } })
      "
    >
      <template #left>
        <!-- <van-icon name="description" size="18"></van-icon> -->
      </template>
      <template #right>
        <van-icon name="add-o" size="18" />
      </template>
    </van-nav-bar>
    <div class="banner" @click="vanImagePreview(bannerUrl)">
      <img :src="bannerUrl" alt="" />
    </div>
    <!-- 搜索 -->
    <van-sticky :offset-top="46">
      <form action="/">
        <van-search
          v-model="searchValue"
          placeholder="请输入搜索关键词"
          @search="onSearch"
        />
      </form>
    </van-sticky>
    <div class="main">
      <!-- 文章列表 -->
      <article-list :list="articleList"></article-list>
    </div>
    <footer class="txt_center mt-10 mb-10">到底啦</footer>
    <!-- 挂载到 body 节点下 -->
    <van-popup
      v-model:show="asideShow"
      closeable
      position="left"
      :style="{
        height: '100%',
        width: '80%',
      }"
    >
      <div class="asideMain p-15">
        <div class="asideTitle">文章类型</div>
        <v-tree :data="treeData" :default="defaults"></v-tree>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { reactive, toRefs ,onMounted} from "vue";
import { ImagePreview, Toast } from "vant";
import articleList from "./components/articleList.vue";
import { artcle } from "@/api/api.js";

export default {
  name: "home",
  props: {
    routes: {
      type: String,
      required: true,
    },
  },
  components: {
    articleList,
  },
  setup() {
    const state = reactive({
      articleList: [],
      asideShow: false,
      bannerUrl: "https://s.im5i.com/2021/06/19/aftZM.jpg",
      content: "",
      searchValue:'',
    });
    const vanImagePreview = (img) => {
      ImagePreview({
        images: [img],
        closeable: true,
        overlayStyle: {
          zIndex: 9999,
        },
      });
    };
    // 搜索
    const onSearch = (val) => Toast(val);
    // 文章列表
    const artcleList = async () => {
      const { data: res } = await artcle.list();
      if (res.status != 0) return Toast.fail(res.message);
      state.articleList = res.data
    };
    // 初始化加载
    onMounted(() => {
      artcleList();
    });
    return {
      ...toRefs(state),
      vanImagePreview,
      onSearch,
      artcleList,
    };
  },
};
</script>

<style lang="less" scoped>
.asideMain {
  padding: 15px;
  height: 100%;
  box-sizing: border-box;
  .asideTitle {
    font-size: 17px;
  }
}
.main {
  padding: 0 15px;
  box-sizing: border-box;
  // height: 900px;
}
</style>
